<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>媒体对象--媒体对象列表</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<!--
针对上图的媒体对象列表效果，Bootstrap框架提供了一个列表展示的效果，在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，而在li上使用“media”，示例代码如下：
-->
<body>
  <ul class="media-list">
      <li class="media">
          <a class="pull-left" href="#">
              <img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
          </a>
          <div class="media-body">
              <h4 class="media-heading">Media Header标题</h4>
              <div>…</div>
          </div>
      </li>
      <li class="media">
          <a class="pull-left" href="#">
              <img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
          </a>
          <div class="media-body">
              <h4 class="media-heading">Media Header</h4>
              <div>…</div>
          </div>
      </li>
      <li class="media">
          <a class="pull-left" href="#">
              <img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
          </a>
          <div class="media-body">
              <h4 class="media-heading">Media Header</h4>
              <div>…</div>
          </div>
      </li>
  </ul>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>